<!--
 * @Author: your name
 * @Date: 2021-05-26 14:47:37
 * @LastEditTime: 2021-06-05 15:19:56
 * @LastEditors: YaoXiaoTian
 * @Description: In User Settings Edit
 * @FilePath: \tourismpc\src\components\banner\index.vue
-->
<template>
  <div class="block">
    <el-carousel trigger="click" height="600px">
      <el-carousel-item v-for="(item, index) in carousel" :key="index">
        <img :src="item.imgPath" alt="" class="bannerImg" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "Banner",
  //carousel为传入的轮播图数据
  // props: {
  //   carousel: {
  //     type: Array,
  //     default: () => [],
  //   },
  // },
  data() {
    return {
      carousel: [],
    };
  },
  mounted() {
    this.getCarouselImg();
  },
  methods: {
    getCarouselImg() {
      this.$http.fetch(this.$apiPath.getCarouselImg).then((res) => {
        if (res.code === 200) {
          for (let i = 0; i < 3; i++) {
            let carousel_id = res.data.carouselImg[`carouselImgId${i + 1}`];
            let imgPath = res.data.carouselImg[`carouselImgUrl${i + 1}`];
            this.carousel.push({
              carousel_id,
              imgPath,
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less">
.bannerImg {
  height: 600px;
  width: 100%;
  object-fit: cover;
}
.el-carousel__button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e3e3e3;
  opacity: 1;
}
.el-carousel__indicator--horizontal {
  padding: 12px 12px 50px 12px;
}
.el-carousel__indicator.is-active button {
  background-color: #d4a46f;
}
.el-carousel__arrow {
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
  color: #d4a46f;
  font-size: 75px;
}
.el-carousel__arrow:hover {
  background-color: rgba(0, 0, 0, 0);
}
</style>
